www.luotao2008.cn视频网校，仅需要一个耳机+QQ远程即可完成所有教学任务。

题 目:从零学习Flash课件制作(9)

第九节 动画的嵌套


例1 行驶的汽车
我们在前面讨论元件的好处时曾说过，制作一些复杂动画必须要用到元件。本例制作的动画就比较复杂，所要实现的功能是：舞台左边停有一辆汽车，点击右下角按钮后，汽车向右行驶，汽车行驶时车轮要转动，当汽车行驶到右边时停止，车轮也同时停止转动。本课件中，如果只是汽车从左到右运动倒比较简单，但关键是车轮的动作比较复杂，一方面需要转动，另外还要随着汽车一起从左向右移动，在平移中嵌套着转动。这种嵌套的动画必须要用元件才能完成，具体思路是：先制作一个车轮元件，再制作一个汽车元件，在汽车元件中所用的车轮就是前面制作的车轮元件，这样汽车元件中就嵌套着车轮元件，而且在汽车元件中还要制作车轮转动的动画，然后把汽车元件拖到主场景中，让汽车从左向右移动。也就是说，在汽车元件中只制作出车轮的转动动画，而汽车的平移则在场景中完成，这样分工合作就可以制作比较复杂的动画。
制作步骤：
第一步，新建Flash文件。
第二步，制作车轮元件。新建影片元件“wheel”，在舞台上绘制一个车轮图案，如图1-9-1所示。


图1-9- 1

图1-9- 2

图1-9- 3


第三步，新建小汽车元件。
新建影片元件“car”。在图层1绘制小汽车车身图案。然后添加一个图层，在元件库中将元件“wheel”拖到舞台上前轮的位置，在属性面板中将它的实例名命为“wheelq_mc”。再添加一个图层，将元件“wheel”再拖一个到舞台上作为后轮，这样形成一个汽车图案，如图1-9-2。
第四步，制作车轮转动的效果。
继续让编辑区处于小汽车“car”处。
首先在图层1的第20帧插入普通帧。再把图层2中小汽车的变形点调整到圆心处，在图层2第5帧插入关键帧，用主工具栏中的旋转工具 将车轮影片顺时针旋转90度，再在第10帧、第15帧和第20帧依次插入关键帧，并将每帧中的车轮影片都在前面关键帧的基础上顺时针旋转90度，最后在这些关键帧之间创建补间动画。
用相同的方法在图层3创建另一个车轮的旋转动画。
小汽车元件至此就制作完成了，可以看到，它和我们以前所制作的元件是不同的。以前制作的元件都只有一帧，是静态的，如果不制作成元件，完全可以用一般的矢量图代替，而我们现在制作的小汽车元件有自己的动画，当我们把它拖到场景上后，它会不停地在第1帧和第20帧之间循环运行，车轮会不停地转动，当然这里所说的不停转动是指影片运行时转动，而不是编辑时转动，编辑时车轮还是静止的。但我们的头脑中要清楚，要能够想像出把小汽车拖到舞台上后影片运行情况和编辑时是不同的，而在前面的所有例子中，我们编辑时看到的状态就是影片运行时的状态。其时间轴设置如图1-9-4所示。


图1-9- 4

图1-9- 5

第五步，制作汽车平移的动画。把舞台切回到主场景，将库中的小汽车元件拖到舞台左边中间。在小汽车被选中的状态下打开属性面板，在属性面板左下角输入实例名“car_mc”，如图1-9-5。一般来说，如果没有涉及到实例的编程，是不需要给实例命名的，在本例中，我们后面要通过编程来控制车轮是否转动，因此需要给小汽车命名，而且实例名要是英文或拼音，不能是汉字，而元件名是可以用汉字的。
然后在第100帧插入关键帧，把小汽车平移到舞台右边，在第1帧至第100帧之间建立补间动画。
下面我们要做的是控制小车的平移，打开课件后，小车应停在舞台左边，点击按钮后才驶向右边，这需要编程来实现。
第六步，控制小汽车的平移。插入新图层，选中第1帧，打开动作面板，写入停止播放语句“stop();”，再在第100帧插入关键帧，也写入同样的语句“stop();”。再插入新图层，从公用库中拖一个按钮到舞台右下角，选中按钮，展开属性面板，在属性面板中将按钮命名为“play_btn”。最后在图层2第1帧继续写入下面的语句：
play_btn.onRelease = function() {
play();
};
意思是点击此按钮后影片就向前播放。
现在如果测试影片，我们会发现，我们只能控制小车的平移，点击按钮后小车从左向右平移，但不能控制车轮的转动，车轮不只是在小车行驶时转动，小车没行驶时它也在转动，也就是车轮是一直在转动，原因在于小车元件内部的时间轴，也就是图1-9-4所示的时间轴总在从第1帧至第20帧间循环运行。正如上所述，在编辑状态下我们看到的效果与影片运行时效果是不同的。因此我们必须让小车停下时，小车元件内部的时间轴也停止运行，小车行驶时，小车元件内部的时间轴也跟着运行。
第七步，控制车轮的转动。
在图层2第1帧继续写入语句：
car_mc.stop();
在按钮play_btn的点击函数体中，也就是花括号里加入语句：
car_mc.play();
现在图层2第1帧里共写入了下面这些语句：
stop();
car_mc.stop();
play_btn.onRelease = function() {
play();
car_mc.play();
};
再解释一下这些语句的功能：
“stop()”的功能是让主场景停止在第1帧，也就是让小汽车停止在第1帧，这是在控制小汽车在场景上的平移。“car_mc.stop()”语句中，“car_mc”是小汽车的实例名，“stop()”是停止的意思，中间用一个点相连，意思是让小汽车元件内部的时间轴，即图1-9-4所示时间轴停止运行，小汽车内部时间轴停止运行了，车轮自然也就不转了，包以我们实际上是通过控制小汽车内部时间轴是否运行，来控制车轮是否转动。点击按钮后执行函数体，也就是花括号里的语句，其中“play”是让主场景向前运行，也就是让小车向前行驶，“car_mc.play();”是让小车内部时间轴向前运行，让车轮转动起来。
最后在图层2最后一帧继续写入语句：
car_mc.stop();
课件至此制作完成。大家可以思考一下，如果我们还想在舞台右下角加入一个停止按钮，点击这个按钮时让小车停下，应该怎样做？
这种动画的嵌套其实就是时间轴的嵌套，主场景有一个主时间轴，而主场景上的实例影片又各自都有它们自己的时间轴，课件运行时，这些时间轴都在运行，当然我们也可以通过程序语句让某一个实例内部的时间轴停止在某一帧，这样配合就可以制作出非常复杂的动画来。
如果你觉得上面这个例子有些难的话，我们下面来制作一个飞翔的小鸟来理解这种动画的嵌套。
例2 飞翔的小鸟
小鸟在天空飞翔的动画也是比较复杂的，一方面小鸟的翅膀要上下扇动，另外一方面小鸟在天空中还要移动。我们可以这样分工：把小鸟制作成单独的元件，在这个元件内部制作小鸟翅膀扇动的动画，在主场景则制作小鸟在舞台上移动的动画。
制作步骤：
第一步，新建flash文件。
第二步，制作扇动着翅膀的小鸟元件。新建影片元件，命名为“niao”。在第1帧画一幅翅膀向下的小鸟图案，如图1-9-6。


图1-9- 6

图1-9- 7

图1-9- 8


然后在第5帧插入关键帧，把小鸟向下的翅膀改成向上，如图1-9-7。
最后在第10帧插入普通帧，时间轴如图1-9-8。
这样小鸟元件就做好了，当小鸟被拖到场景上后，其内部的时间轴就会在第1至10帧之间循环。
如果绘制这些小鸟图案有难度的话，也可以找一些小鸟飞翔的gif动画，将其导入到元件舞台上，会自动形成飞翔的动画。但一般来说，导入的gif动画属于位图，放大后会有马赛克，远不如手绘的矢量图漂亮，另外一个问题是导入的gif图中的每一帧都有背景色，我们还要将其一一打散后把背景色删掉，总之，导入gif动画也是一件既麻烦，效果也不太好的无奈之举。绘图功底不太好的老师也还有另一个选择，就是先导入位图，然后新插入一个图层，在新图层“蒙”着位图画，画好后再把位图删掉，这样也能做出非常漂亮的动画来。比如本例中的小鸟，笔者就是用这种方法绘制出来的。
第三步，回到主场景，打开元件库，把刚制作的小鸟元件拖到舞台左侧外部。然后在第40帧插入关键帧，将小鸟移到舞台右侧外部，在第1帧与第40帧之间建立补间动画，一个小鸟从左侧飞进舞台再从右侧飞出舞台，如此循环的课件就制作完成了。
应该说，本例是非常简单的，只有一个元件。目的是让大家通过这种简单的动画嵌套，来理解flash中这种多时间轴嵌套动画的运行模式及制作方法。
例3 智能统计图
下面我们要制作的是一个小学数学低年级的统计图课件。在低年级，学生刚接触到统计图，数据都比较小，基本上是一个数对应着1格，比如数字7就涂7格，数字9就涂9格，如图1-9-9。现在我们的课件要能够展示涂色的过程，也就是说操作者要能够自由地控制每一个条形涂到哪里，涂了色的还可以退出，也就是可以自由控制条形的涂色高度。


图1-9- 9

图1-9- 10

图1-9- 11


制作步骤：
第一步，新建flash文件。
第二步，新建影片元件，命名为“kuai”。在其第1帧舞台上绘制一个宽40像素、高20像素的无边红色长方形，将其组合成一个整体。
第三步，选择长方形，复制并粘贴，连续操作11次，把12个长方形利用对齐面板排列成一竖条，长方形之间要有一些空隙，如图1-9-10。
第四步，在第2帧插入关键帧，在第3帧也插入关键帧，这样一直到第13帧，在每一帧都插入关键帧。然后返回第1帧，把第1帧的长方形全部删除，成为一个空白关键帧，再把第2帧的长方形只留下最下面一个，上面的11个全部删除，第3帧则留下最下面2个，这样依次操作，到第13帧时，长方形全部留下。
第五步，选中第1帧，打开动作面板，输入让播放头停在第1帧的语句“stop();”。
第六步，回到主场景。我们现在要做的是把刚才制作的条形从库中拉出一些到主场景舞台上排好。打开元件库，把元件“kuai”拉一个到舞台上。这时我们发现舞台上根本就看不到条形，只有一个小的空心圆，如图1-9-11。这是为什么呢？原来我们在制作这个元件时，考虑到统计图的绘制应该从零开始，从下往上一格一格的涂，刚开始应该是空白的，因此把第1帧的长方形块全都删除了，第1帧成了一个空白关键帧。而编辑时，影片在场景中显示的图象就是其第1帧的内容，因此是空白的。但这也给我们带来了一个难题，那就是我们没法给这些影片在场景上定位，没法把它们排列整齐了。
本例中我解决这个难题的方法是这样的：先把元件“kuai”中最后一帧的方块原样复制到第1帧，然后在主场景排列这些影片，把课件制作完成后再返回元件中把第1帧的方块删除就行了。
第七步，把舞台切回到元件“kuai”，把第13帧中的所有方块全部原样复制到第1帧中。再把舞台切换到主场景，可以看到舞台上原来只是一个小空圆的影片已成了一个条形了，如图1-9-10。
第八步，把场景上的影片再复制7个从左到右排列好，然后绘制好座标轴，标好纵轴的刻度和横轴的项目，如图1-9-12。


图1-9- 12

图1-9- 13



第九步，选中左边第1个条形影片，也就是字母A上面的影片，打开属性面板，将其实例名命为“a_mc”，再将字母B上面的条形影片命名为“b_mc”，用相同的方法，把8个影片都命名，最后一个命名为“h_mc”。
下面我们要做的是用按钮控制每一个条形的显示。
第十步，新增一图层，打开按钮公用库，从中拉一个按钮到第左边第一个条形上面，在属性面板中将其命名为“as_btn”，再将其复制一个到条形下面，重命名为“ax_btn”，如图1-9-13。
第十一步，新增一图层，在第1帧动作面板写入下面的语句：
as_btn.onRelease = function() {
a_mc.nextFrame();//影片a_mc跳转到下一帧
};
ax_btn.onRelease = function() {
a_mc.prevFrame();//影片a_mc跳转到上一帧
};
如果现在测试影片，第一个条形上的按钮就应该可以控制条形的涂色高度了。现在的问题是这两个按钮在舞台上显得比较多余，破坏了统计图的整体构图。下面我们要做的是把按钮隐去。
第十二步，选中两个按钮，打开属性面板，将其透明度设置为0。
当按钮的透明度设为0后，我们就看不到按钮了，这种按钮被称为隐形按钮。隐形按钮在课件制作中是经常要用到的，因为隐形按钮我们是看不到的，它的位置需要课件使用者自己记住，因此，隐形按钮一定要放在一个好记的位置，这一点非常重要。比如本例中，我们把增加条形高度和降低条形高度的按钮分别放在条形上面和下面，应该是一个比较好记和好找的位置。
第十三步，用相同的方法，制作课件中控制其它条形高度的功能。每个条形的高度都需要两个按钮来控制，这些按钮可以复制条形1中的按钮，然后在属性面板中重命名，比如条形2中的两就按钮就分别改名为“bs_btn”和“bx_btn”，而编程语句也可以先复制再修改。
第十四步，把舞台切换到元件“fangkuai”，把第1帧中的方块全部删除，让第1帧变为一个空白关键帧。
第十五步，测试影片。

FLASH课件制作培训班开班了！火热报名中!加我站管理QQ444860709解决任何疑问！ 培训QQ专业群67042004。